<template>
	<div class="home">
		<div class="card-container">
			<el-row v-for="(cards, i) in homeCards" :key="i" :gutter="30" class="card-row">
				<el-col v-for="(card, j) in cards" :key="j" :span="8">
					<el-card class="card-box" shadow="hover" :style="{ backgroundColor: card.bgColor }" @click="handleChange(card)">
						{{ card.label }}
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup name="home" lang="ts">
import router from '@/router/index';
import homeCards from '@/config/home-card';
import { onActivated } from 'vue';

onActivated(() => {
	console.log('active--------');
});

function handleChange(card: any) {
	const path = router.resolve({ name: card.name });
	window.open(path.href, '_blank');
}
</script>

<style lang="scss" scoped>
.home {
	background-color: #f0f2f5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	background: url('@/assets/images/home-bg.png');
	-webkit-animation: animate-cloud 20s linear infinite;
	animation: animate-cloud 20s linear infinite;
	text-align: center;
}

@keyframes animate-cloud {
	from {
		background-position: 600px 100%;
	}

	to {
		background-position: 0 100%;
	}
}

@-webkit-keyframes animate-cloud {
	from {
		background-position: 600px 100%;
	}

	to {
		background-position: 0 100%;
	}
}

@-moz-keyframes animate-cloud {
	from {
		background-position: 600px 100%;
	}

	to {
		background-position: 0 100%;
	}
}

@-ms-keyframes animate-cloud {
	from {
		background-position: 600px 100%;
	}

	to {
		background-position: 0 100%;
	}
}

@-o-keyframes animate-cloud {
	from {
		background-position: 600px 100%;
	}

	to {
		background-position: 0 100%;
	}
}

.card-row {
	margin-bottom: 30px;
}

.card-box {
	width: 180px;
	cursor: pointer;

	&:hover {
		transform: scale(1.05);
	}
}
</style>
